<template>
  <div class="plateModules-total">
    <div class="container">
      <h1>行业痛点</h1>

      <div class="cnt">
        <ul>
          <li
            v-for="item in list"
            :key="item.id"
            @mouseenter="enter(item)"
            @mouseleave="leave()"
          >
            <div class="img">
              <img :src="item.src" alt="" style="width: 32px; height: 32px" />
            </div>
            <h1>{{ item.title }}</h1>
            <p>{{ item.cnt }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "plateModules",

  data() {
    return {
      list: [
        {
          id: 1,
          title: "被动营销",
          cnt: "客户离店后失去联系 未成单用户失去转化机会",
          src: require("../assets/img/ic_ls1.png"),
        },
        {
          id: 2,
          title: "客户流失",
          cnt: "员工离职后带走客户 企业客户资源流失",
          src: require("../assets/img/ic_ls2.png"),
        },
        {
          id: 3,
          title: "转化率低",
          cnt: "缺乏数字化经营意识和工具 不知道该如何进行提升",
          src: require("../assets/img/ic_ls3.png"),
        },
        {
          id: 4,
          title: "渠道维护",
          cnt: "消费者在购买商品后 不能及时获得优质的售后服务",
          src: require("../assets/img/ic_ls4.png"),
        },
      ],
    };
  },

  methods: {
    enter(item) {
      if (item.id === 1) {
        this.list[0].src = require("../assets/img/hGetMan.png");
      } else if (item.id === 2) {
        this.list[1].src = require("../assets/img/hGetMan.png");
      } else if (item.id === 3) {
        this.list[2].src = require("../assets/img/hMark.png");
      } else if (item.id === 4) {
        this.list[3].src = require("../assets/img/hMark.png");
      }
    },

    leave() {
      this.list = [
        {
          id: 1,
          title: "被动营销",
          cnt: "客户离店后失去联系 未成单用户失去转化机会",
          src: require("../assets/img/ic_ls1.png"),
        },
        {
          id: 2,
          title: "客户流失",
          cnt: "员工离职后带走客户 企业客户资源流失",
          src: require("../assets/img/ic_ls2.png"),
        },
        {
          id: 3,
          title: "转化率低",
          cnt: "缺乏数字化经营意识和工具 不知道该如何进行提升",
          src: require("../assets/img/ic_ls3.png"),
        },
        {
          id: 4,
          title: "渠道维护",
          cnt: "消费者在购买商品后 不能及时获得优质的售后服务",
          src: require("../assets/img/ic_ls4.png"),
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.plateModules-total {
  width: 100%;
  background: #f6f6f6;
  height: 554px;
  padding: 60px 0;
  box-sizing: border-box;
  li {
    list-style-type: none;
  }
  .container {
    width: 1250px;
    margin: 0 auto;
    background: #f6f6f6;
    h1 {
      font-size: 36px;
      font-family: PingFangSC;
      color: #333;
      text-align: center;
      margin-bottom: 40px;
    }
    .cnt {
      ul {
        display: flex;
        justify-content: space-between;
      }
      li {
        width: 264px;
        height: 280px;
        background: #ffffff;
        box-shadow: 0px 25px 50px 0px rgba(27, 27, 126, 0.03);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        .img {
          width: 56px;
          height: 56px;
          background: linear-gradient(270deg, #386bf3, #96b1ff);
          opacity: 0.93;
          border-radius: 28px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 40px;
        }
        h1 {
          font-size: 20px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #333333;
          line-height: 31px;
          margin-top: 40px;
          margin-bottom: 0;
        }
        p {
          font-size: 14px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #999999;
          line-height: 24px;
          padding: 0 20px;
          margin-top: 20px;
        }
      }
      li:hover {
        background: linear-gradient(-57deg, #3345ed, #7fa0ff);
        box-shadow: 0px 25px 50px 0px rgba(27, 27, 126, 0.05);
        position: relative;
        top: -8px;
        h1 {
          color: #ffffff;
        }
        p {
          color: #e6e6e6;
        }
        .img {
          background: #fff;
        }
      }
    }
  }
}
</style>